<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper title="商城banner图管理">
    <a-spin :spinning="loading">
      <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
        <a-form
          @submit="handleSubmit"
          :form="form"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-form-item label="banner图" style="margin-bottom:0">
            <d-banners :banners="appSetting.banners" @edit="onBannerClick"></d-banners>
            <div class="banners-upload">
              <d-upload v-model="newBanner.banner" class="banner-upload" />
              <a-select v-model="newBanner.type" placeholder="选择banner图类型">
                <a-select-option v-for="(item, key) in bannersType" :key="item" :value="key">{{
                  item
                }}</a-select-option>
              </a-select>
              <a-input v-model="newBanner.url" placeholder="url地址，选链接则必填"></a-input>
              <a-button style="margin-left:8px" @click="bannerAdd">添加</a-button>
            </div>
          </a-form-item>
          <a-form-item label="中间推广类型">
            <a-select v-model="appSetting.middle.middle_type" placeholder="请选择推广类型">
              <a-select-option :value="Number(index)" v-for="(item, index) in middleType" :key="index">{{
                item
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-row>
            <a-col :span="6" :offset="5">
              <a-form-item label="推广标题" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-model="appSetting.middle.title" placeholder="输入推广标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="推广链接" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-model="appSetting.middle.url" placeholder="输入推广链接"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="推广图" style="margin-bottom:0">
            <d-upload v-model="appSetting.middle.img" class="middle-img" />
          </a-form-item>
          <a-row>
            <a-col :span="6" :offset="5">
              <a-form-item label="下方小广告位一" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-model="appSetting.down_left.title" placeholder="输入标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="广告一链接" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-model="appSetting.down_left.url" placeholder="输入链接"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="广告图片一" style="margin-bottom:0">
            <d-upload v-model="appSetting.down_left.img" class="img-one" />
          </a-form-item>
          <a-row>
            <a-col :span="6" :offset="5">
              <a-form-item label="下方小广告位二" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-model="appSetting.down_right.title" placeholder="输入标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="广告二链接" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-model="appSetting.down_right.url" placeholder="输入链接"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="广告图片二" style="margin-bottom:0">
            <d-upload v-model="appSetting.down_right.img" class="img-two" />
          </a-form-item>
          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button htmlType="submit" type="primary">提交</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import { appList, appEdit } from '@/api/app'

const MIDDLE_TYPE = {
  1: '广告位',
  2: '优惠券'
}

const BANNERS_TYPE = {
  1: '洗衣',
  2: '家电',
  3: '家政',
  4: '商城',
  5: '链接'
}

export default {
  name: 'AppIndex',
  data () {
    this.middleType = MIDDLE_TYPE
    this.bannersType = BANNERS_TYPE
    return {
      form: this.$form.createForm(this),
      loading: false,
      appSetting: {
        banners: [],
        middle: {
          middle_type: 1,
          img: '',
          title: '',
          url: ''
        },
        down_left: {
          img: '',
          title: '',
          url: ''
        },
        down_right: {
          img: '',
          title: '',
          url: ''
        }
      },
      newBanner: {
        banner: '',
        type: undefined,
        url: ''
      }
    }
  },
  created () {
    this.getAppList()
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.loading = true
      appEdit(this.appSetting).then(res => {
        this.$message.success('保存成功')
        this.loading = false
      })
    },
    onBannerClick (banner) {
      this.newBanner = banner
    },
    bannerAdd () {
      if (!this.newBanner.banner) {
        this.$message.warning('请先添加banner图片')
        return
      }
      this.appSetting.banners.push(this.newBanner)
      this.newBanner = {
        banner: '',
        type: undefined,
        url: ''
      }
    },
    getAppList () {
      this.loading = true
      appList().then(res => {
        const data = res.data
        const setting = {
          banners: JSON.parse(data.banners),
          middle: JSON.parse(data.middle),
          down_left: JSON.parse(data.down_left),
          down_right: JSON.parse(data.down_right)
        }
        this.appSetting = setting
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.img-one,
.img-two {
  /deep/.ant-upload {
    width: 250px;
  }
}
.middle-img {
  /deep/.ant-upload {
    width: 360px;
  }
}
.banner-upload {
  /deep/.ant-upload {
    width: 117px;
    height: 58px;
  }
}

.banners-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .ant-upload-picture-card-wrapper {
    width: auto;
  }
  .ant-select {
    margin-right: 8px;
  }
}
</style>
